<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Details</title>
<link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="assets/css/DT_bootstrap.css" rel="stylesheet" media="screen">
<style type="text/css">
#example tbody tr td:last-child {
	visibility: hidden;
}

#example tbody tr:hover {
	background: #fff;
}

#example tbody tr:hover td:last-child {
	visibility: visible;
}

div#multiedit {
    display: none;
    float: left;
    padding-right: 1em;
}
</style>
</head>
<body>
	<div class="navbar navbar-static-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="brand" href="#">Project name</a>
				<div class="nav-collapse">
					<ul class="nav">
						<li><a href="dashboard.html"><i
								class="icon-home icon-black"></i> Dashboard</a></li>
						<li class="active"><a href="history.html"><i
								class="icon-time icon-black"></i> History</a></li>
						<li><a href="tasks.html"><i
								class="icon-check icon-black"></i> Tasks</a></li>
					</ul>
					<div href="#" class="btn btn-success disabled"
						style="margin-left: 100px;">Balance: +354,33 &euro;</div>
					<div class="pull-right">
						<a href="#add" onclick="Reset()" role="button"
							class="btn btn-primary" data-toggle="modal">Add expense</a>
						<div class="btn-group">
							<a href="#" class="btn dropdown-toggle" data-toggle="dropdown">Niko
								<span class="caret"></span>
							</a>
							<ul class="dropdown-menu">
								<li><a href="settings.html"><i
										class="icon-cog icon-black"></i> Settings</a></li>
								<li class="divider"></li>
								<li><a href="login.html"><i class="icon-off icon-black"></i>
										Logout</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="add" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="addLabel">Add expense</h3>
    </div>
    <div class="modal-body">
    	<div id="alertikus2"></div>
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputDate">Date</label>
                <div class="controls">
                    <input type="text" id="inputDate" placeholder="DD.MM.YYYY">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputDescription">Description</label>
                <div class="controls">
                    <input type="text" id="inputDescription" placeholder="Description">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputCategory">Category</label>
                <div class="controls ui-widget">
                    <select id="inputCategory" placeholder="Category">
                        <option value=""></option>
                        <option value="Clothes">Clothes</option>
                        <option value="Rent">Rent</option>
                        <option value="Household">Household</option>
                        <option value="Leisure">Leisure</option>
                        <option value="Cat">Cat</option>
                        <option value="Car">Car</option>
                        <option value="Doctor">Doctor</option>
                        <option value="Medicine">Medicine</option>
                        <option value="Office Material">Office Material</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputAmount">Amount</label>
                <div class="controls">
                    <div class="btn-group" data-toggle="buttons-radio">
                        <button type="button" class="btn"><i class="icon-minus icon-black"></i></button>
                        <button type="button" class="btn"><i class="icon-plus icon-black"></i></button>
                    </div>
                    <input type="text" id="inputAmount" placeholder="Amount">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputRepeat">Repeat</label>
                <div class="controls">
                    <select id="inputRepeat">
                        <option>daily</option>
                        <option>weekly</option>
                        <option>monthly</option>
                        <option>annually</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Discard</button>
        <button id="saveandnew" class="btn btn-primary">Save changes and add new</button>
        <button id="saveonly" class="btn btn-primary" data-dismiss="modal">Save changes</button>
    </div>
</div>

<div id="edit" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="addLabel">Edit expense</h3>
    </div>
    <div class="modal-body">
    	<div id="alertikus2"></div>
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputDate">Date</label>
                <div class="controls">
                    <input type="text" id="inputDate" placeholder="DD.MM.YYYY">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputDescription">Description</label>
                <div class="controls">
                    <input type="text" id="inputDescription" placeholder="Description">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputCategory">Category</label>
                <div class="controls ui-widget">
                    <select id="inputCategory" placeholder="Category">
                        <option value=""></option>
                        <option value="Clothes">Clothes</option>
                        <option value="Rent">Rent</option>
                        <option value="Household">Household</option>
                        <option value="Leisure">Leisure</option>
                        <option value="Cat">Cat</option>
                        <option value="Car">Car</option>
                        <option value="Doctor">Doctor</option>
                        <option value="Medicine">Medicine</option>
                        <option value="Office Material">Office Material</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputAmount">Amount</label>
                <div class="controls">
                    <div class="btn-group" data-toggle="buttons-radio">
                        <button type="button" class="btn"><i class="icon-minus icon-black"></i></button>
                        <button type="button" class="btn"><i class="icon-plus icon-black"></i></button>
                    </div>
                    <input type="text" id="inputAmount" placeholder="Amount">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputRepeat">Repeat</label>
                <div class="controls">
                    <select id="inputRepeat">
                        <option>daily</option>
                        <option>weekly</option>
                        <option>monthly</option>
                        <option>annually</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Discard</button>
        <button id="saveonly" class="btn btn-primary" data-dismiss="modal">Save changes</button>
    </div>
</div>

	<div class="container">
    <div id="alertikus1"></div>
		<h2>Details</h2>
		
		
		 <div>
      <ul class="pager">
          <li><a href="#">&nbsp;&nbsp;&lt;&nbsp;&nbsp;</a></li>
          <li><input type="text" value="01.12.2012  -  31.12.2012" style="text-align: center;width: 300px;"></li>
          <li><a href="#">&nbsp;&nbsp;&gt;&nbsp;&nbsp;</a></li>
      </ul>
  </div>		
 <form>
 <table style="width: 100%;">
			<thead>
				<tr>
					<th style="width: 60%; text-align: left;" colspan="3">Amount</td>
					<th style="width: 20%; text-align: left;">Category</td>
					<th style="width: 20%;">
						<label class="checkbox pull-right">
							<input type="checkbox" id="filtercheckbox"> All
						</label>
					</th>
				</tr>
		  </thead>
		  <tbody>
				<tr>
					<td style="width: 20%;">
						 <div class="input-prepend">
						 	<span class="add-on">&euro;</span>
						 	<input class="span2" type="text" placeholder="from">
						 </div>
					</td>
					<td width="25px" align="center">
						&ndash;
					</td>
					<td>
						 <div class="input-prepend">
						 	<span class="add-on">&euro;</span>
						 	<input class="span2" type="text" placeholder="to">
						 </div>
					</td>
					<td colspan="2" rowspan="4">
						<select style="width: 100%;" multiple="multiple" id="filtercategories">
							<option>Salary</option>
							<option>Clothes</option>
							<option>Rent</option>
							<option>Household</option>
							<option>Leisure</option>
							<option>Cat</option>
							<option>Car</option>
							<option>Doctor</option>
							<option>Medicine</option>
							<option>Office Material</option>
						</select>
					</td>
				</tr>
				<tr>
  				<td>&nbsp;</td>
				</tr>
				<tr>
					<th style="text-align: left;">
						Description
					</th>
				</tr>
				<tr>
					<td colspan="3">
						 <div class="input-prepend">
						 	<span class="add-on"><i class="icon-search icon-black"></i></span>
						 	<input class="span5" type="text">
						 </div>
					</td>
				</tr>
		  </tbody>
		</table>
 </form>
		<div align="center"><img src="assets/img/Detail.png"></div>
		<br>
		<br>
		<br>
		<div class="pull-right">
            <div id="multiedit">
                <a class="btn btn-primary"></a>
            </div>
			<a class="btn btn-danger">Delete selected</a>
		</div>
		<div class="clearfix"></div>
		<form class="well">
			<table class="table" id="example">
				<thead>
					<tr>
						<th>Effective on</th>
						<th>Category</th>
						<th>Description</th>
						<th>Amount</th>
						<th>Repeating</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>01.12.2012</td>
						<td>Salary</td>
						<td>First job</td>
						<td>900,00 &euro;</td>
						<td>monthly</td>
					</tr>
					<tr>
						<td>02.12.2012</td>
						<td>Food</td>
						<td>Kebap</td>
						<td>-3,50 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>02.12.2012</td>
						<td>Salary</td>
						<td>Second job</td>
						<td>1350,00 &euro;</td>
						<td>monthly</td>
					</tr>
					<tr>
						<td>03.12.2012</td>
						<td>Rent</td>
						<td>Rent</td>
						<td>-1500,00 &euro;</td>
						<td>monthly</td>
					</tr>
					<tr>
						<td>03.12.2012</td>
						<td>Food</td>
						<td>Mc Donalds</td>
						<td>-11,50 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>04.12.2012</td>
						<td>Clothes</td>
						<td>T-shirt H&amp;M</td>
						<td>-21,90 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>04.12.2012</td>
						<td>Food</td>
						<td>Chinese</td>
						<td>-20,00 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>06.12.2012</td>
						<td>Food</td>
						<td>Billa</td>
						<td>-81,60 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>07.12.2012</td>
						<td>Household</td>
						<td>Bipa</td>
						<td>-31,10 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>08.12.2012</td>
						<td>Food</td>
						<td>Asia Box</td>
						<td>-7,50 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>10.12.2012</td>
						<td>Doctor</td>
						<td>Orthopaedic</td>
						<td>-500,00 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>10.12.2012</td>
						<td>Office Material</td>
						<td>Paper &amp; Pens</td>
						<td>-16,44 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>11.12.2012</td>
						<td>Cat</td>
						<td>Food &amp; cat litter</td>
						<td>-42,89 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>15.12.2012</td>
						<td>Food</td>
						<td>Mc Donalds</td>
						<td>-11,50 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>15.12.2012</td>
						<td>Leisure</td>
						<td>Cinema James Bond</td>
						<td>-14,70 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>16.12.2012</td>
						<td>Clothes</td>
						<td>Underwear P&amp;C</td>
						<td>-20,99 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>16.12.2012</td>
						<td>Misc</td>
						<td>Amazon Christmas presents</td>
						<td>-91,16 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>18.12.2012</td>
						<td>Food</td>
						<td>Schnitzelhaus</td>
						<td>-6,23 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>19.12.2012</td>
						<td>Food</td>
						<td>Zielpunkt</td>
						<td>-3,00 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>19.12.2012</td>
						<td>Food</td>
						<td>Hofer</td>
						<td>-16,99 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>20.12.2012</td>
						<td>Misc</td>
						<td>Speeding ticket</td>
						<td>-89,00 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>21.12.2012</td>
						<td>Household</td>
						<td>Pest Control</td>
						<td>-140,00 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>21.12.2012</td>
						<td>Food</td>
						<td>Billa</td>
						<td>-45,78 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>23.12.2012</td>
						<td>Office Material</td>
						<td>Christmas presents</td>
						<td>-31,20 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>24.12.2012</td>
						<td>Food</td>
						<td>Dinner fancy restaurant</td>
						<td>-131,22 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>25.12.2012</td>
						<td>Leisure</td>
						<td>Disco</td>
						<td>-46,10 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>26.12.2012</td>
						<td>Car</td>
						<td>Highway toll</td>
						<td>-89,40 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>27.12.2012</td>
						<td>Misc</td>
						<td>Fireworks</td>
						<td>-160,49 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>28.12.2012</td>
						<td>Food</td>
						<td>Billa</td>
						<td>-40,84 &euro;</td>
						<td></td>
					</tr>
					<tr>
						<td>31.12.2012</td>
						<td>Food</td>
						<td>Mc Donalds</td>
						<td>-20,66 &euro;</td>
						<td></td>
					</tr>
				</tbody>
			</table>
		</form>
	</div>
	<script src="assets/js/jquery.min.js"></script>
	<script type="text/javascript">
	$(function() {
        $('#inputCategory').chosen();
    });
    
    $(function() {
    	$('#accordion').on('show', function() {
    		$('#filter-icon').removeClass('icon-chevron-right').addClass('icon-chevron-down');
    	});
    	$('#accordion').on('hide', function() {
    		$('#filter-icon').removeClass('icon-chevron-down').addClass('icon-chevron-right');
    	});
    });
    
    $(function() {
    	$('#filtercategories').change(function() {
    		$('#filtercheckbox').attr('checked', false);
    	});
    	
    	$('#filtercheckbox').change(function() {
    		$('#filtercategories option').prop('selected', $('#filtercheckbox').is(':checked'));
    	});
    });

	$('#example.table thead tr').prepend($('<td/>').html($('<input/>').attr('type', 'checkbox').change(function() {
		var new_status = $(this).is(':checked');
		$(this).parents('table').find('tbody tr').each(function(index) {
			$(this).find(':first-child input:checkbox').attr('checked', new_status);
		});
        checkChecked();
	})));
	$('#example.table tbody tr').prepend($('<td/>').html($('<input/>').attr('type', 'checkbox').change(function() {
		$('#example.table thead tr input:checkbox').attr('checked', $('#example.table tbody tr input:checkbox').size() == $('#example.table tbody tr input:checked').size());
        checkChecked();
	})));
	$('#example.table thead tr').append($('<th/>'));
	$('#example.table tbody tr').append($('<td/>').html($('<a/>').attr('href', '#edit').attr('data-toggle', 'modal').html($('<i/>').addClass('icon-edit'))));
    function checkChecked() {
        var c = 0;
        $('#example.table tbody tr input:checkbox').each(function(index) {
            if ($(this).attr('checked') == 'checked') {
                c++;
            }
        });
        if (c > 1) {
            $('#multiedit').find('a').text('Edit ' + c + ' selected items');
            $('#multiedit').show();
        } else {
            $('#multiedit').hide();
        }
    }
	</script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/chosen.jquery.min.js"></script>
	<script src="assets/js/jquery.dataTables.js"></script>
	<script src="assets/js/DT_bootstrap.js"></script>
	<script type="text/javascript">
    $(function() {
        $('#inputCategory').chosen();
    });
	</script>
	<script type="text/javascript">
	$('#add button').each(function(index) {
		$(this).click(function() {
			$('#add form')[0].reset();
		});
	});
	</script>
	<script type="text/javascript">
	$('#saveonly').click(function() {
		if (Math.random() > 0.5) {
			$('#alertikus1').html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Error!</strong> Unable to add expense. Please try again.</div>');
		} else {
			$('#alertikus1').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Success!</strong> Expense saved.</div>');
		}
	});
	$('#saveandnew').click(function() {
		if (Math.random() > 0.5) {
			$('#alertikus2').html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Error!</strong> Unable to add expense. Please try again.</div>');
		} else {
			$('#alertikus2').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Success!</strong> Expense saved.</div>');
		}
	});
	$('a[href="#add"]').click(function() {
		$('#alertikus1').html('');
		$('#alertikus2').html('');
	});
	</script>
</body>
</html>
